<template>
	<view class="container">
		<unifab @dragClick="refresh" creatTop="60" creatLeft="85" image="../../static/refresh.png" imageWidth="60upx"></unifab>
		<unifab @dragClick="createScene" creatTop="70" creatLeft="85" image="../../static/jia.png" imageWidth="60upx">
		</unifab>
		<unifab @dragClick="createSceneByScan" creatTop="80" creatLeft="85" image="../../static/saoma.png" imageWidth="60upx">
		</unifab>
		<z-paging ref="pagingzhipai" v-model="dataAdminList" @query="queryAdminList">
			<cu-custom bgColor="bg-gradual-blue" :isBack="false">
				<block slot="content">待我处理工单</block>
			</cu-custom>
			<!-- 头部开始 -->
			<view class="goods-header-wrap">
				<view  v-for="(item, index) in list" class="goods-header-item" :class="{'goods-header-item-action' : index == goodsNav}" @click="setNav(index)">{{item}}
				</view>
			</view>
			<view @click="goClass(item.Id,'assign')" v-if="dataAdminList.length>0" class="page-box" v-for="(item,index) in dataAdminList">
				<view class="order">
					<view class="top">
						<view class="left">
							<uni-text class="cuIcon-titles text-blue"></uni-text>
							<view class="store">{{ item.Id }}</view>
						</view>
						<view class="right">
							<view class="progressBox">
								<view class="btn">待指派</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="left">
						</view>
						<view class="content">
							<view class="title u-line-2 text-bold">设备：{{ item.QrcodeName }}</view>
							<view class="title u-line-2 text-bold">内容：{{ item.Desc }}</view>
							<view class="title u-line-2 text-bold">时间：{{ item.AddTime }}</view>
						</view>
					</view>
					<u-line color="#f1f1f1" margin="24rpx 0 15rpx 0"></u-line>
					<view class="bottom">
						<view>
							<text class="text-blue text-shadow">上报人：{{  item.AddUserName }}</text>
						</view>
						
						<view class="btnBox">
							<view class="evaluate btn">查看详情</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import request1 from '@/common/request.js';
import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
export default {
	components: {
			unifab
		},
	data() {
		return {
			goodsNav: 1,
			authMessage:'',
			activeColor: '#0081ff',
			getData:{
				pageindex:1,
				pagesize:99
			},
			orderList: [[]],
			dataList: [
			],
			dataAdminList: [
			],
			dataJieAnList: [
			],
			dataIsEndList:[],
			list: [
				{
					name: '待指派'
				},
				{
					name: '待处理'
				},
				{
					name: '待结案'
				},
				{
					name: '已完结'
				},
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0
		};
	},
	mounted() {
	},
	computed: {
	},
	onLoad() {
		let that=this
		that.getStatusList();
	},
	methods: {
		getStatusList() {
			var that = this;
			uni.showLoading({
				title: '加载中...'
			})
			let opts = {
				url: 'SceneApi/GetSceneStatus',
				method: 'get'
			};
			request1.httpTokenRequest(opts).then(res => {
				if(res.data.code == 1){
					that.list=res.data.data
					console.log(that.list)
					uni.hideLoading();
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		setNav(goodsNav) {
			this.goodsNav = goodsNav
			console.log("tap set nav " + goodsNav);
		},
		refresh(){
			setTimeout(() => {
				 uni.reLaunch({
					url: '/pages/index/tabbar?PageCur='+'index'
				 });
			}, 0)
		},
		//待指派
		queryAdminList(pageNo, pageSize) {
			uni.showLoading({
				title: '加载中'
			})
			var that = this;
			let opts = {
				url: 'api/GetQrcodeSceneAdminList',
				method: 'get'
			};
			that.getData.pageindex=pageNo;
			that.getData.pagesize=pageSize;
			request1.httpTokenRequest(opts,that.getData).then(res => {
				if(res.data.code == 1){
					this.$refs.pagingzhipai.complete(res.data.data.list);
					uni.hideLoading();
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		createScene(){
			// uni.reLaunch({
			// 	url: '/pages/qrcode/scene/add/add'
			// });
			uni.navigateTo({
				url: '/pages/qrcode/scene/add/add'
			})
		},
		goClass(id,desc){
			uni.getStorage({
				key: 'userdata',
				success: function (res1) {
					uni.navigateTo({
						url: '/pages/qrcode/scene/detail?id='+id+'&desc='+desc+'&IsAdmin='+res1.data.IsAdmin
					})
				}
			});
		},
		reachBottom() {
			// 此tab为空数据
			if(this.current != 2) {
			}
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		createSceneByScan(){
			let that = this;
			uni.scanCode({
				onlyFromCamera: false,
				success: function(res) {
					let qrcodeId=request1.getRequest(res.result,'id')
					//跳转添加页面
					uni.navigateTo({
						url: '/pages/qrcode/scene/add/add?qrcodeid='+qrcodeId
					})
				},fail() {
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.zp-container{
	.zp-main{
		margin-top: -400rpx !important;
	}
}
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-type-warning-dark;
			.progressBox{
				width: 150rpx;
				float: right;
				.btn {
					line-height: 52rpx;
					width: 140rpx;
					border-radius: 12rpx;
					border: 2rpx solid $u-tips-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-tips-color;
				}
				.evaluate {
					color: $u-type-primary;
					border-color: $u-type-primary;
				}
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 260rpx;
				height: 190rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 45rpx;
			}
			.type {
				margin: 6rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.delivery-time {
				color: #0081ff;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 12rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-type-primary;
				border-color: $u-type-primary;
			}
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}
}
.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}

	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}

	.goods-item-wrap {
		margin-top: 24rpx;
	}
.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 30rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}
</style>